---
permalink: "/advanced/case-studies/business-rating/rating-modal/index.xml"
hv_title: "Rate the Instaworker"
hv_button_behavior: "close"
---
{% extends 'templates/base.xml.njk' %}
{% from './_rating.xml.njk' import rating %}

{% block styles %}
  {% include './_styles.xml.njk' %}
{% endblock %}

{% block container %}
  <view scroll="true" style="main">
    <text style="title">Rate the Instaworker</text>
    <view style="worker-info">
      <image source="/hyperview/public/advanced/case-studies/business-rating/image.jpg" style="worker-info-avatar" />
      <text style="worker-info-name">Jake Tepperman</text>
      <text style="worker-info-details">
        Event Server, Private Residence
      </text>
      <text style="worker-info-time">Fri Aug 3, 7:00 PM - 1:00 AM</text>
      <view id="rating" style="rating-container">
        <view id="star0" style="rating-style">
          {{ rating(0) }}
        </view>
      </view>
    </view>
    <view style="form-group">
      <text-field
        placeholder="Any other feedback?"
        placeholderTextColor="#8D9494"
        multiline="true"
        name="other_feedback"
        style="input"
      />
    </view>
  </view>
  <view style="bottomsheet">
    <view
      id="saveButtonContainer"
      action="replace"
      delay="500"
      hide-during-load="saveButton"
      href="/hyperview/public/advanced/case-studies/business-rating/rating_save.xml"
      show-during-load="savingButton"
      target="saveButtonContainer"
    >
      <view id="saveButton" style="bottomsheet-button">
        <text id="saveLabel" style="bottomsheet-button-label">Done</text>
      </view>
      <view
        id="savingButton"
        hide="true"
        style="bottomsheet-button bottomsheet-button-disabled"
      >
        <text id="savingLabel" style="bottomsheet-button-label">
          Saving...
        </text>
      </view>
    </view>
  </view>
  <view hide="true">
    <view id="star1" style="rating-style">
      {{ rating(1) }}
    </view>
    <view id="star2" style="rating-style">
      {{ rating(2) }}
    </view>
    <view id="star3" style="rating-style">
      {{ rating(3) }}
    </view>
    <view id="star4" style="rating-style">
      {{ rating(4) }}
    </view>
    <view id="star5" style="rating-style">
      {{ rating(5) }}
    </view>
  </view>
{% endblock %}
